<template>
  <el-card style="margin: 18px 2%;width: 95%">
    <div style="height:320px">
      <el-table
        :data="items"
        stripe
        :header-cell-style="{
          background: '#B6C4D3',
          color: '#1A1C1E',
          padding: '0',
        }"
        :header-row-style="{ height: '35px' }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
      >
        <!-- 表头 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="studentId" label="学号" width="100" />
        <el-table-column prop="name" label="姓名" fit />
        <el-table-column prop="gender" label="性别" fit />
        <el-table-column prop="departmentName" label="所属院系" fit />
        <el-table-column prop="majorName" label="所属专业" fit />
        <el-table-column prop="enrollmentYear" label="所在年级" fit />
        <el-table-column prop="className" label="所在班级" fit />
        <el-table-column prop="phoneNum" label="联系方式" fit />
        <el-table-column prop="address" label="地址" fit />
        <!-- 对该列的操作 -->
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <!-- 点击事件传参为scope.row.* -->
            <el-button
              @click.native.prevent="clickEvent1(scope.row)"
              type="text"
            >
              操作1
            </el-button>
            <el-button
              @click.native.prevent="clickEvent2(scope.row.studentId)"
              type="text"
            >
              操作2
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-row>
      <el-col :span="6"
        ><div>
          <div style="margin: 20px 0 20px 0;float: left">
            <el-button>取消选择</el-button>
            <el-button>批量删除</el-button>
          </div>
        </div></el-col
      >
      <el-col :span="18"
        ><div style="padding:19px">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="allItems.length"
            style="text-align: center; margin-top:10px"
          >
          </el-pagination></div
      ></el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "tableTemplate",
  data() {
    return {
      currentPage: 1, // 当前页数
      pageSize: 5, // 表的行数
      items: [], // 当前页面的所有数据项
      // 总数据项
      allItems: [
        {
          studentId: 222222,
          name: "学生1",
          gender: "男",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2020级",
          className: "卓越二班",
          phoneNum: 13600000000,
          address: "C10-100",
        },
        {
          studentId: 222222,
          name: "学生2",
          gender: "男",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2020级",
          className: "卓越二班",
          phoneNum: 13600000000,
          address: "C10-100",
        },
        {
          studentId: 222222,
          name: "学生3",
          gender: "男",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2020级",
          className: "卓越二班",
          phoneNum: 13600000000,
          address: "C10-100",
        },
        {
          studentId: 222222,
          name: "学生4",
          gender: "男",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2020级",
          className: "卓越二班",
          phoneNum: 13600000000,
          address: "C10-100",
        },
        {
          studentId: 222222,
          name: "学生5",
          gender: "男",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2020级",
          className: "卓越二班",
          phoneNum: 13600000000,
          address: "C10-100",
        },
        {
          studentId: 222222,
          name: "学生6",
          gender: "男",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2020级",
          className: "卓越二班",
          phoneNum: 13600000000,
          address: "C10-100",
        },
        {
          studentId: 222222,
          name: "学生7",
          gender: "男",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2020级",
          className: "卓越二班",
          phoneNum: 13600000000,
          address: "C10-100",
        },
        {
          studentId: 222222,
          name: "周晓升",
          gender: "男",
          departmentName: "软件学院",
          majorName: "软件工程",
          enrollmentYear: "2020级",
          className: "卓越二班",
          phoneNum: 13600000000,
          address: "C10-100",
        },
      ],
    };
  },
  methods: {
    // 事件一
    clickEvent1(item) {
      console.log(item);
    },
    // 事件二
    clickEvent2(studentId) {
      console.log(studentId);
    },
    //处理页数的改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.items = this.allItems.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  mounted() {
    // 挂载时载入当前学生数，看情况要不要
    this.handleCurrentChange(this.currentPage);
  },
};
</script>
